<template>
  <div class="setting">
    <el-drawer title="我是标题" :visible.sync="show" size="40%" :with-header="false" @close="onClose">
      <div class="setting-inner">
        <div class="title"><i class="iconfont icon-config"></i>参数设置</div>
        <div class="cell">
          <div class="cell-title">采集模式 {{setting.cjms =='03'?'Acc+Gyr':(setting.cjms =='02'?'Gyr':'Acc')}}</div>
          <div class="cell-value">
            <el-radio-group v-model="setting.cjms">
              <el-radio label="01">Acc</el-radio>
              <el-radio label="02">Gyr</el-radio>
              <el-radio label="03">Acc+Gyr</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="cell">
          <div class="cell-title">采集频率 {{setting.cjpl}}</div>
          <div class="cell-value">
            <div class="setting-cjpl">
              <el-slider v-model="setting.cjpl" :step="50" :min="50" :max="500" show-stops
                         :marks="marks"></el-slider>
            </div>
          </div>
        </div>
        <div class="setting-ops">
          <el-button type="primary" @click="onSubmit">确定提交</el-button>
          <el-button @click.stop="doClose">关闭</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import Options from './options';

  export default {
	name: "setting",
	mixins: [Options],
	data() {
	  return {
		show: false,
		setting: {
		  cjms: '03',
		  cjpl: 500
		},
		marks: {
		  50: '50',
		  100: '100',
		  150: '150',
		  200: '200',
		  250: '250',
		  300: '300',
		  350: '350',
		  400: '400',
		  450: '450',
		  500: '500',
		  300: {
			style: {
			  color: '#1989FA'
			},
			label: this.$createElement('strong', '300')
		  }
		}
	  }
	},
	props: {
	  visible: {
		type: Boolean,
		default: false
	  }
	},
	watch: {
	  visible: function () {
		this.show = this.visible;
	  },
	},
	methods: {
	  onClose: function () {
		this.$emit('update:visible', false);
	  },
	  onSubmit: function () {
		this.doConfig(this.setting);
	  },
	  doClose: function () {
		this.show = false;
		this.onClose();
	  }
	}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @require "../../ui/common/stylus/variable.styl"
  .setting-inner {
    background-color $color-bg;
    padding 20px 0;
    height 100vh;

    .title {
      color $color-success;
      padding-left 18px;

      i {
        margin-right 10px;
      }
    }

    .cell {
      .cell-title {
        height 50px;
        line-height 50px;
        padding-left 20px;
        font-size 16px;
        color $color-light-grey;
      }

      .cell-value {
        padding 20px;
        background-color $color-white;
      }
    }

    .setting-cjpl {
      padding-left 10px;
    }

    .setting-ops {
      padding-top 60px;
      text-align center;
    }
  }
</style>